<template>
	<view>
		<!-- F1 面包屑 -->
		<!-- F2 轮播广告 -->
		<!-- F3 主标题 -->
		<!-- F4 售价 承诺 -->
		<!-- F5 客服 规格 数量 -->
		<!-- F6 按钮 -->
		<!-- F7 为您推荐 -->
		<uni-card title="为您推荐" isFull>
			<!-- 水平滚动容器 -->
			<scroll-view scroll-x>
				<view class="suggest-list"
				:style="{width:250*suggestList.length+'rpx'}"
				>
					<view class="suggest" 
						v-for="(item,i) in suggestList" :key="i">
						<image :src="$url.base+item.pic" mode="widthFix"></image>
						<text>{{item.lname}}</text>
					</view>					
				</view>
			</scroll-view>
		</uni-card>
		<!-- F8 商品详情 -->
		<uni-card title="商品详情" isFull>
			<!-- <text>{{product.details}}</text> -->
			<rich-text :nodes="product.details"></rich-text>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				family:'', //商品型号
				product:'', //商品详情
				suggestList: [  //推荐的商品 —— 真正项目中此数据来自于后台接口
					{lid: 10, lname:'ThinkPadS2 13.3超霸', pic:'img/product_detail/product_detail_1.png'},
					{lid: 12, lname:'戴尔 DELL燃7000', pic:'img/product_detail/product_detail_2.png'},
					{lid: 15, lname:'戴尔魔方R2505TSS', pic:'img/product_detail/product_detail_3.png'},
					{lid: 17, lname:'联想 YOGA900 多彩版', pic:'img/product_detail/product_detail_4.png'}],

			};
		},
		onLoad(data) {
			// console.log(data)
			let pid=data.pid
			if(!data){
				pid=1
			}
			let url=this.$url.productDetails
			// console.log(url)
			uni.showLoading({
				title:'加载中'
			})
			uni.request({
				url,
				data:{lid:pid},
				success: (res) => {
					// console.log(res)
					this.family=res.data.family
					this.product=res.data.product
					this.product.details=this.product.details.replace(/src="img/gi,`src="${this.$url.base}img`)
					this.product.details=this.product.details.replace(/<img/gi,'<img style="width:100%"')
					uni.setNavigationBarTitle({
						title:this.product.lname
					})
				},
				fail: (err) => {
					console.log(err)
				},complete: () => {
					uni.hideLoading()
				}
				
			})
		}
	}
</script>

<style lang="scss">
	.suggest-list{
		display: flex;
		}
	.suggest{
		width: 250rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		image{
			width: 90%;
		}
		text{
			font-size: $uni-font-size-sm;
			transform: scale(.8);
			white-space: nowrap;
		}
	}
		
	
</style>
